import Vue from "vue";
import { Component, Prop, Watch } from "vue-property-decorator";
import "./app-visual-data-picker.less";

/**
 * @description 虚拟表单数据选择
 * @export
 * @class AppVisualDataPicker
 * @extends {Vue}
 */
@Component({})
export class AppVisualDataPicker extends Vue {
  /**
   * @description 编辑器实列
   * @type {*}
   * @memberof AppVisualDataPicker
   */
  @Prop() editorInstance!: any;

  /**
   * @description 表单项
   * @type {*}
   * @memberof AppVisualDataPicker
   */
  @Prop() public parentItem!: any;

  /**
   * @description 编辑器值
   * @type {string}
   * @memberof AppVisualDataPicker
   */
  @Prop() public value!: string;

  /**
   * @description 编辑器名称
   * @type {string}
   * @memberof AppVisualDataPicker
   */
  @Prop() public name!: string;

  /**
   * @description 编辑器位置
   * @type {*}
   * @memberof AppVisualDataPicker
   */
  @Prop() public position!: any;

  /**
   * @description 真实控件
   * @type {string}
   * @memberof AppVisualDataPicker
   */
  @Prop() realCompRef!: any;

  /**
   * @description 列表项
   * @type {any[]}
   * @memberof AppVisualDataPicker
   */
  public items: any[] = [];

  /**
   * @description 是否聚焦
   * @type {boolean}
   * @memberof AppVisualDataPicker
   */
  public isFocus: boolean = false;

  /**
   * @description 输入框文本
   * @type {string}
   * @memberof AppVisualDataPicker
   */
  public text: string = '';

  /**
   * @description 下拉列表数据改变
   * @param {*} newVal 新值
   * @param {*} oldVal 旧值
   * @memberof AppVisualDataPicker
   */
  @Watch("realCompRef.items", {
    deep: true,
    immediate: true,
  })
  public listItemsChange(newVal: any[], oldVal: any[]) {
    if (newVal?.length > 0) {
      this.items = [...newVal];
    }
  }

  /**
   * @description 生命周期
   * @memberof AppVisualDataPicker
   */
  public created() {
    if (this.realCompRef) {
      this.realCompRef.openViewClose = (result: any) => {
        let item: any = {};
        if (result.datas && Array.isArray(result.datas)) {
          Object.assign(item, result.datas[0]);
        }
        if (this.realCompRef.data) {
          if (this.realCompRef.valueitem) {
            this.$emit("change", {
              name: this.realCompRef.valueitem,
              value: item[this.realCompRef.deKeyField]
                ? item[this.realCompRef.deKeyField]
                : item["srfkey"],
            });
          }
          if (this.name) {
            this.$emit("change", {
              name: this.name,
              value: item[this.realCompRef.deMajorField]
                ? item[this.realCompRef.deMajorField]
                : item["srfmajortext"],
            });
          }
          this.realCompRef.fillPickUpData(item);
        }
      };
    }
  }

  /**
   * @description 选中值变化
   * @param {*} tag
   * @memberof AppVisualDataPicker
   */
  public selectChange(item: any) {
    if (this.realCompRef.valueitem) {
      this.$emit("change", {
        name: this.realCompRef.valueitem,
        value: item[this.realCompRef.deKeyField],
      });
    }
    if (this.realCompRef.name) {
      this.$emit("change", {
        name: this.realCompRef.name,
        value: item[this.realCompRef.deMajorField],
      });
    }
  }

  /**
   * @description 绘制选项
   * @param {*} item
   * @memberof AppVisualDataPicker
   */
  public renderOption(item: any) {
    if (!item[this.realCompRef.deMajorField]) {
      return null;
    }
    return (
      <li
        value={item[this.realCompRef.deMajorField]}
        onClick={() => {
          this.selectChange(item);
        }}
        class="luckysheet-mousedown-cancel option"
      >
        {item[this.realCompRef.deMajorField]}
      </li>
    );
  }

  /**
   * @description 绘制组件
   * @return {*}
   * @memberof AppVisualDataPicker
   */
  public render() {
    return (
      <div
        class={"app-visual-data-picker luckysheet-mousedown-cancel"}
        style={{
          height: `${this.position.height}px`,
        }}
      >
        <div class="data-picker-content luckysheet-mousedown-cancel">
          <input
            onfocus={() => {
              this.isFocus = true;
              this.realCompRef.onSearch();
            }}
            onblur={() => {
              this.isFocus = false;
            }}
            oninput={(event: any) => {
              this.text = event.target.value;
              this.realCompRef.onSearch(event.target.value);
            }}
            type="text"
            value={this.text || this.realCompRef.value}
            class="input-inner luckysheet-mousedown-cancel"
          />
          <div class="data-picker-icons">
            <img
              class={{ "data-picker-arrows": true, "is-reverse": this.isFocus }}
              src={"../assets/dist/assets/iconfont/arrows.svg"}
            ></img>
            {this.realCompRef.showButton ? (
              <img
                class="data-picker-search luckysheet-mousedown-cancel"
                src={"../assets/dist/assets/iconfont/search.svg"}
                onClick={(event) => {
                  this.realCompRef.openView(event);
                }}
              ></img>
            ) : null}
            {this.realCompRef.linkview ? (
              <img
                class="data-picker-share luckysheet-mousedown-cancel"
                src={"../assets/dist/assets/iconfont/share.svg"}
                onClick={(event) => {
                  this.realCompRef.openLinkView(event);
                }}
              ></img>
            ) : null}
          </div>
          <ul
            class="options luckysheet-mousedown-cancel"
            style={{
              top: `${
                this.position.height > 40
                  ? this.position.height / 2 + 20
                  : this.position.height
              }px`,
            }}
          >
            {this.items.map((item: any) => {
              return this.renderOption(item);
            })}
          </ul>
        </div>
      </div>
    );
  }
}
